<template>

<div class="search">
  <el-input v-model="search_username" style="width: 20%"></el-input>
  <el-button @click="search">搜索好友</el-button><br>
  <el-table :data="tableData" style="width: 100%"  v-show="isShow">
    <el-table-column prop="userName" label="账户" width="180" />
    <el-table-column prop="name" label="昵称" width="180" />
    <el-table-column prop="sex" label="性别" width="180" />
    <el-table-column prop="phone" label="电话" />

    <el-table-column align="right">

      <template #default="scope">
        <el-button size="small" @click="sendRequest(scope.$index, scope.row)"
        >添加好友</el-button
        >
        <el-button
            type="danger"
            size="small"
            @click.prevent="deleteRow(scope.$index)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</div>
    <br>
  <br><br>


  <br>

  <div style="background-color: #F6F6F6">
    <h4>好友推荐</h4>
    <div v-for="i in all_username_array.length" :key="i" >
      <el-card class="single-member effect-3">

        <div class="member-image">

        </div>

        <div class="member-info">
          <AvatarComponent :user-name=all_username_array[i-1] :size="60"></AvatarComponent>
          <h3>{{all_name_array[i-1]}}</h3>
          <p>{{all_sex_array[i-1]}}</p>
          <el-button type="primay" @click="send(all_username_array[i-1],all_name_array[i-1])">添加好友</el-button>
        </div>
      </el-card>

    </div>

  </div>



</template>

<script>
import axios from "axios";
import AvatarComponent from "@/components/AvatarComponent";

export default {
  name: "SearchFriendView",
  components: {AvatarComponent},
  data(){
    return{
      search_username:'',
      username:'',
      name:'',
      tableData:[],
      isShow:false,
      all_username_array:[],
      all_name_array:[],
      all_sex_array:[]
    }
  },
  created() {
    const  _this=this
    _this.username= this.$route.query.username
    axios({
      method: 'post',
      url: 'http://localhost:8081/showUser',
      params: {

      }
    })
        .then(function (response) {
          console.log(response.data); // 前台调试能够看到获取到数据了
          for (let i = 0; i < response.data.length; i++) {
            _this.all_username_array[i]=response.data.at(i).userName;
            _this.all_name_array[i]=response.data.at(i).name;
            _this.all_sex_array[i]=response.data.at(i).sex;

          }
          console.log(_this.all_username_array)

        })
        .catch(function (error) {
          console.log(error);
        });
    axios({
      method: 'post',
      url: 'http://localhost:8081/showUserByAdmin',
      params: {
        userName: _this.username
      }
    })
        .then(function (response) {
          console.log(response)
          _this.name=response.data.at(0).name
          console.log(_this.name)
        })
        .catch(function (error) {
          console.log(error);
        });

  },

  methods:{
      send(recAdmin,recName){
      const  _this=this
      // alert("发送好友请求成功")
      _this.username= this.$route.query.username
      axios({
        method: 'post',
        url: 'http://localhost:8081/sendReguest',
        params: {
          reqAdmin:_this.username,
          reqName:_this.name,
          recAdmin:recAdmin,
          recName:recName

        }
      })
          .then(function (response) {
            console.log(response.data); // 前台调试能够看到获取到数据了
            alert(response.data)

          })
          .catch(function (error) {
            console.log(error);
          });
    },
    search(){
      const  _this=this
      axios({
        method: 'post',
        url: 'http://localhost:8081/showUserByAdmin',
        params: {
          userName: this.search_username,
        }
      })
          .then(function (response) {
            console.log(response.data); // 前台调试能够看到获取到数据了
            if(response.data.length!=0){
              _this.tableData=response.data
              _this.isShow=true
            }else{
              alert("没有查询到该用户")
            }


          })
          .catch(function (error) {
            console.log(error);
          });
    },
    sendRequest(index){
      const  _this=this
      // alert("发送好友请求成功")
      _this.username= this.$route.query.username
      axios({
        method: 'post',
        url: 'http://localhost:8081/sendReguest',
        params: {
          reqAdmin:_this.username,
          reqName:_this.name,
          recAdmin:_this.tableData.at(index).userName,
          recName:_this.tableData.at(index).name

        }
      })
          .then(function (response) {
            console.log(response.data); // 前台调试能够看到获取到数据了
            alert(response.data)


          })
          .catch(function (error) {
            console.log(error);
          });
    }
  }


}
</script>

<style scoped>

.single-member{
  width: 15%;
  float: left;
  font-family: sans-sarif;
  margin: 30px 2.5%;
  background-color: #F5F3F5;
  text-align: center;
  position: relative;
  /*border: solid 1px #888888;*/
}
.member-image img{
  max-width: 100%;
  vertical-align: middle;
}
h3 {
  font-size: 24px;
  font-weight: normal;
  margin: 10px 0 0;
  text-transform: uppercase;
}
h5 {
  font-size: 16px;
  font-weight: 300;
  margin: 0 0 15px;
  line-height: 22px;
}
p {font-size: 14px;
  font-weight: 300;
  line-height: 22px;
  padding: 0 30px;
  margin-bottom: 10px;
}
.social-touch a{
  display: inline-block;
  width: 27px;
  height: 26px;
  vertical-align: middle;
  margin: 0 2px;
  /*background-image: url(images/social-icons.png);*/
  background-repeat: no-repeat;
  opacity: 0.7;
  transition: 0.3s;
}
.social-touch a:hover{
  opacity: 1;
  transition: 0.3s;
}
.fb-touch{
  background-position: 0 0;
}
.tweet-touch{
  background-position: -35px 0;
}
.linkedin-touch{
  background-position: -71px 0;
}
.icon-colored .fb-touch{
  background-position: 0 -27px;
}
.icon-colored .tweet-touch{
  background-position: -35px -27px;
}
.icon-colored .linkedin-touch{
  background-position: -71px -27px;
}
.effect-3{
  max-height: 302px;
  min-height: 302px;
  overflow: hidden;
}
.effect-3 h3{
  padding-top: 7px;
  line-height: 33px;
}
.effect-3 .member-image{
  border-bottom: 5px solid #e5642b;
  transition: 0.4s;
  height: 150px;
  width: 100%;
  display: inline-block;
  float: none;
  /*vertical-align: middle;*/
}
.effect-3 .member-info{
  transition: 0.4s;
}
.effect-3 .member-image img{
  width: 100%;
  vertical-align: bottom;
}
.effect-3 .social-touch {
  background-color: #e5642b;
  float: left;
  left: 0;
  bottom: 0;
  overflow: hidden;
  padding: 5px 0;
  width: 100%;
  transition: 0.4s;
}
.effect-3:hover .member-image{
  border-bottom: 0;
  border-radius: 0 0 50px 50px;
  height: 81px;
  display: inline-block;
  overflow: hidden;
  width: 109px;
  transition: 0.4s;
}
</style>